import React from "react";
import { Button, Platform, Text, Vibration, View, SafeAreaView, StyleSheet } from "react-native";
import DescTextCom from '../../../components/DescText'



const Separator = () => {
    return <View style={Platform.OS === "android" ? styles.separator : null} />;
}
const App = () => {

    const ONE_SECOND_IN_MS = 1000;

    const PATTERN = [
        1 * ONE_SECOND_IN_MS,
        2 * ONE_SECOND_IN_MS,
        3 * ONE_SECOND_IN_MS
    ];

    const PATTERN_DESC =
        Platform.OS === "android"
            ? "wait 1s, vibrate 2s, wait 3s"
            : "wait 1s, vibrate, wait 2s, vibrate, wait 3s";
    return (
        <SafeAreaView style={styles.container}>
            <View>
                <DescTextCom>振动设备。</DescTextCom>
            </View>
            <View>
                <Button title="Vibrate once" onPress={() => Vibration.vibrate()} />
            </View>
            <Separator />
            {Platform.OS == "android"
                ? [
                    <View>
                        <Button
                            title="Vibrate for 10 seconds"
                            onPress={() => Vibration.vibrate(10 * ONE_SECOND_IN_MS)}
                        />
                    </View>,
                    <Separator />
                ]
                : null}
            <Text style={styles.paragraph}>Pattern: {PATTERN_DESC}</Text>
            <Button
                title="Vibrate with pattern"
                onPress={() => Vibration.vibrate(PATTERN)}
            />
            <Separator />
            <Button
                title="Vibrate with pattern until cancelled"
                onPress={() => Vibration.vibrate(PATTERN, true)}
            />
            <Separator />
            <Button
                title="Stop vibration pattern"
                onPress={() => Vibration.cancel()}
                color="#FF0000"
            />
        </SafeAreaView>
    );
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        paddingTop: 44,
        padding: 8
    },
    header: {
        fontSize: 18,
        fontWeight: "bold",
        textAlign: "center"
    },
    paragraph: {
        margin: 24,
        textAlign: "center"
    },
    separator: {
        marginVertical: 8,
        borderBottomColor: "#737373",
        borderBottomWidth: StyleSheet.hairlineWidth
    }
});

export default App;